<template>
  <div class="header-box px-4 flex flex-row justify-between items-center">
    <div class="flex flex-row items-center">
      <img
        src="../../public/picture/logo2.png"
        style="height: 70px; width: auto"
      />
      <el-button
        v-if="router.currentRoute.value.path !== '/courselist'"
        :icon="HomeFilled"
        circle
        type="primary"
        plain
        @click="gotoHome"
      />
    </div>
    <div
      class="search"
      v-if="router.currentRoute.value.path === '/courselist'"
    >
      <input
        placeholder="Search..."
        type="text"
        v-model="videoStore.searchTitle"
      />
      <button
        type="submit"
        @click="videoStore.getAllVideo"
      >Go</button>
    </div>
    <!-- <div>
      <el-input
        v-model="input3"
        placeholder="Please input"
        class="input-with-select"
        size="large"
        style="width: 60vh"
      >
        <template #prepend>
          <el-select
            v-model="select"
            placeholder="Select"
            size="large"
            style="width: 115px"
          >
            <el-option label="Restaurant" value="1" />
            <el-option label="Order No." value="2" />
            <el-option label="Tel" value="3" />
          </el-select>
        </template>
        <template #append>
          <el-button :icon="Search" size="large" />
        </template>
      </el-input>
    </div> -->
    <div class="flex flex-row items-center">
      <el-dropdown>
        <span class="el-dropdown-link">
          <el-avatar :src="userStore.userinfo.avatar" />
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              :icon="User"
              @click="goTouserHub"
            >个人中心</el-dropdown-item>
            <el-dropdown-item
              :icon="SwitchButton"
              @click="goLogin"
            >退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <p style="color: white; margin-left: 10px">{{ userStore.userinfo.name }}</p>
      <div
        class="ml-4"
        v-if="userStore.userinfo.role === 'admin'"
      >
        <el-badge
          :value="videoNum"
          class="item"
        >
          <el-button
            type="primary"
            :icon="Message"
            @click="openDialog"
            circle
          />
        </el-badge>
      </div>
    </div>
  </div>
  <el-dialog
    v-model="dialogVisible"
    title="待审核视频"
    width="1000"
    style="height: auto;overflow-y: hidden;"
    :before-close="handleClose"
  >
    <div
      class="w-full"
      style="max-height: 500px;overflow-y: scroll;"
    >
      <div
        class="rounded-md border p-4 flex justify-between"
        v-for="(video, index) in videos"
        :key="index"
      >
        <div class="flex flex-row">
          <div style="width: 256px;height: 144px;">
            <img
              style="width: 100%;height: 100%;border-radius: 5px;"
              :src="video.cover"
              alt="Your Image"
            >
          </div>
          <div class="ml-4">
            <div class="text-lg mb-2">标题: {{ video.title }}</div>
            <div class="text-lg mb-2">作者: {{ video.author?.name }}</div>
            <div class="text-lg">类型: {{ video.type }}</div>
          </div>
        </div>
        <div>
          <div>
            <el-button
              type="success"
              @click="pass(video.id)"
            >通过</el-button>
            <el-button
              type="danger"
              @click="deleteVideo(video.id)"
            >驳回</el-button>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import {
  User,
  Star,
  Message,
  HomeFilled,
  SwitchButton,
} from '@element-plus/icons-vue'
import service from '../service/service'
import { ElMessage } from 'element-plus'
import { ref, onMounted } from 'vue'
import router from '../router'
import { useUserStore } from '../stores/user'
const userStore = useUserStore()
import { useVideoStore } from '../stores/video'
const videoStore = useVideoStore()
const dialogVisible = ref(false)
const videoNum = ref(0)
onMounted(() => {
  getVideo()
})

const openDialog = () => {
  dialogVisible.value = true
}

const goTouserHub = () => {
  router.push({ path: '/userHub/userInfo' })
}

const gotoHome = () => {
  router.push({ path: '/courselist' })
}

const goLogin = () => {
  router.push({ path: '/login' })
  userStore.initUserInfo()
  videoStore.initVideo()
}

const videos = ref<any>([])
const getVideo = () => {
  service({
    method: 'get',
    url: '/wuli-video/audit-status',
  }).then((result: any) => {
    if (result.data.code === 200) {
      const formattedVideos = result.data.data.map((video: any) => {
        const formattedDate = new Date(video.createDateTime)
          .toISOString()
          .split('T')[0]
        return {
          ...video,
          createDateTime: formattedDate,
        }
      })
      console.log(formattedVideos)
      videos.value = formattedVideos
      videoNum.value = videos.value.length
    }
  })
}

const deleteVideo = (id: any) => {
  service({
    method: 'delete',
    url: '/wuli-video/' + id,
  }).then((result: any) => {
    if (result.data.code === 200) {
      getVideo()
      ElMessage({
        message: '审核成功',
        type: 'success',
      })
      location.reload()
    }
  })
}

const pass = (id: any) => {
  service({
    method: 'get',
    url: '/wuli-video/audit/' + id,
  }).then((result: any) => {
    if (result.data.code === 200) {
      location.reload()
      getVideo()
      ElMessage({
        message: '删除成功',
        type: 'success',
      })
    }
  })
}
</script>

<style>
.header-box {
  max-height: 70px;
  background-color: #b44fbd;
}

.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}

.search {
  display: inline-block;
  position: relative;
}

.search input[type='text'] {
  width: 50vh;
  padding: 10px;
  border: none;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.search button[type='submit'] {
  background-color: #ffcb5a;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 20px;
  box-shadow: 0 0 10px #ffcb5a;
  position: absolute;
  top: 0;
  right: 0;
  transition: 0.9s ease;
}

.search button[type='submit']:hover {
  transform: scale(1.1);
  color: rgb(255, 255, 255);
  background-color: #ff9c64;
}
</style>